<template>
  <div class="Passmiddle-body">
    <div  v-if="UnPassedList.length>0" class="UnpassList-body">
      <div class="UnpassList-main">
              <div class="prove-main" v-for="(item, index) in UnPassedList" :key="index" :class="{laItem: index == UnPassedList.length-1}">
                  <div class="left" :class="{left_purple_unpassed:index%3 == 0,
                                      left_yellow_unpassed:index%3 == 1,
                                      left_pink_unpassed:index%3 == 2,
                                      }">
                  </div>
                  <div class="right">
                      <div class="text_warp">
                          <div class="title">
                            <div class="button" :class="{appealed:item.appealed === true}" @click="appealMethod(item)">
                              申诉
                            </div>
                            <div class="content">
                              <span class="text">{{item.otherActName}}</span>
                              <img class="icon" @click="seeProvePicture(item)" src="../../../assets/img/icon/enter.svg">
                            </div>
                          </div>
                          <p class="tip">{{item.additionalBasis}}</p>
                      </div>
                  </div>
              </div>
          </div>
    </div>
    <div v-else class="empty">
            <img :src="emptypicture">
            <span>没有未通过证明哦~</span>
    </div>
    <!-- 申诉说明 -->
    <div v-if="questioning" class="appeaExplain">
      <div class="up">
        <div class="exit" @click="exit">
          <img :src="exitpicture">
        </div>
        <div class="text">申诉说明</div>
        </div>
        <div class="Explain">
        <div>
          1.每项证明只能在线申诉一次，如果申诉被驳回，再次提出申诉只能通过线下提交材料到相关负责处进行申诉。
        </div>
        <div>2.超过申诉事件则不可申诉</div>
      </div>
    </div>
    <div v-if="showProvePicuture" class="proveimg">
      <div class="proveimg_prove-main">
        <div class="exit" @click="exitimg">
          <img :src="exitpicture">
        </div>
        <div @click="clickPicture"
              :class="showBigPicture === true? 'itemimg_big':'itemimg'" >
          <img :src="showitem.otherActImageUrl">
        </div>
        <div :class="{remark: showitem.appealRemark&&showitem.appealRemark.length>0}" >
          {{showitem.appealRemark}}
        </div>
      </div>
    </div>
    <div class="appealBox" v-if="isappealing">
      <div class="box-body">
        <div class="box-main">
          <div class="title">提交申诉</div>
          <div class="item">
            <div class="information">
              <div class="namebox">
                <div class="namebox-word">申诉项目：</div>
                <div class="itemname">{{showitem.otherActName}}</div>
              </div>
              <div class="tip">{{showitem.additionalBasis}}</div>
            </div>
            <div class="remark">
              <div class="remark-word">添加备注：</div>
              <textarea name="remarkarea" cols="30" rows="10" placeholder="请输入" v-model="text" maxlength="100"></textarea>
            </div>
          </div>
        </div>
        <div class="box-bottom">
          <div class="button-body cancel" @click="exitAppeal">取消</div>
          <div class="button-body sure" @click="sureAppeal">确定</div>
        </div>
      </div>
      <div class="exit">
        <img @click="exitAppeal" src="../../../assets/img/icon/homepage_btn_close@2x.png">
      </div>
    </div>
  </div>
</template>

<script>
import choosedIcon from '../../../assets/img/icon/uploader_file_rb_s.svg'
import unchoosedIcon from '../../../assets/img/icon/uploader_file_rb_n.svg'
import emptypicture from '../../../assets/img/pluto-sign-in.svg'
import exitpicture from '../../../assets/img/icon/homepage_btn_close@2x.png'
import config from '../../../../vue.config'
export default {
  props: {
    questioning: Boolean
  },
  data () {
    return {
      text: '',
      isappealing: false,
      showitem: null,
      showProvePicuture: false,
      showBigPicture: false,
      exitpicture,
      emptypicture,
      UnPassedList: [],
      choosedIcon,
      unchoosedIcon,
      baseUrl: config.devServer.proxy['/student'].target + '/studentevaluation/api/otheract/'
    }
  },
  watch: {
    // eslint-disable-next-line vue/return-in-computed-property
    UnPassedList () {
      this.sendNtgNumber()
    }
  },
  methods: {
    clickPicture () {
      this.showBigPicture = !this.showBigPicture
      // console.log(this.showBigPicture)
    },
    async getUnPassedList () {
      let student = this.$store.state.Student
      let data = {
        name: student.realname,
        studentId: student.studentid,
        college: student.collegename
      }
      // console.log(data)
      let result = await this.$axios({
        url: '/studentevaluation/api/otheract/getUnPassedOtherActivities/' + student.studentid,
        method: 'get'
      })
      if (result.data != null) {
        result = result.data
        this.UnPassedList = result.data
      }
      this.updateUncheckList()
      // console.log(this.UnPassedList)
    },
    sendNtgNumber () {
      this.$emit('getNtgNumber', this.UnPassedList.length)
    },
    exit () {
      this.$emit('exit')
    },
    appealMethod (item) {
      if (item.appealed === true) {
        return
      }
      this.$store.commit('changeCoverState', true)
      this.isappealing = true
      this.showitem = item
    },
    exitAppeal () {
      this.isappealing = false
      this.$store.commit('changeCoverState', false)
    },
    async sureAppeal () {
      if (this.text.length < 1) {
        alert('请输入申诉内容！')
        return
      }
      // console.log(this.showitem)
      let formData = new FormData()
      // console.log(this.showitem.appealActivityId)
      // console.log(this.text)
      formData.append('appealActivityId', this.showitem.id)
      formData.append('appealRemark', this.text)
      let result = await this.$axios({
        url: '/studentevaluation/api/otheract/appealOtherActivity',
        data: formData,
        // method: 'post',
        method: 'put',
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        async: false,
        cache: false,
        contentType: false,
        processData: false
      })
      result = result.data
      if (result.data === 1) {
        alert('申诉成功！')
      } else {
        alert('申诉失败, 可能是由于您已经申诉过了！')
      }
      await this.getUnPassedList()
      this.text = ''
      this.showitem = null
      this.isappealing = false
      this.$store.commit('changeCoverState', false)
    },
    // 下面是关于展示图片的函数
    seeProvePicture (item) {
      this.$store.commit('changeCoverState', true)
      this.showProvePicuture = true
      this.showitem = item
    },
    exitimg () {
      this.showProvePicuture = false
      this.$store.commit('changeCoverState', false)
    },
    updateUncheckList () {
      this.$emit('updateUncheckList')
    }
  },
  mounted () {
    this.getUnPassedList()
    this.sendNtgNumber()
  }
}

</script>

<style lang="scss" scoped>
    .proveimg_prove-main {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .UnpassList-body {
      width: 100%;
      height: 100%;
    }
    .Passmiddle-body {
      width: 100%;
      height: 100%;
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      .proveimg {
          position: absolute;
          width: px2rem(280);
          height: px2rem(230);
          background-color: #fff;
          z-index: 200;
          top: 50%;
          left:50%;
          -webkit-transform: translateX(-50%) translateY(-50%);
          -webkit-transform: translateX(-50%) translateY(-50%);
          -moz-transform: translateX(-50%) translateY(-50%);
          -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
          border-radius: px2rem(31);
          display: flex;
          flex-direction: row-reverse;
          justify-content: center;
          align-items: center;
          .exit {
            position: absolute;
            height: px2rem(30);
            width: px2rem(30);
            right: px2rem(12);
            top: px2rem(12);
            img {
              height: 100%;
              width: 100%;
            }
          }
          .itemimg {
            width: px2rem(156);
            height: px2rem(156);
            margin: px2rem(26) 0 px2rem(10) 0;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .itemimg_big {
            position: fixed !important;
            left: 0 ;
            top: 0 ;
            right: 0 ;
            bottom: 0 ;
            z-index: 300;
            // background-color: blue;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .remark {
            height: px2rem(40);
            width: px2rem(252);
            font-family: PingFang SC;
            line-height: px2rem(20);
            overflow: auto;
            margin-bottom: px2rem(18);
            font-weight: 400;
            font-size: px2rem(14);
          }
        }
    }
    .appeaExplain {
      position: absolute;
      width: px2rem(280);
      height: px2rem(210);
      background-color: #fff;
      z-index: 200;
      border-radius: px2rem(31);
      display: flex;
      flex-direction: column;
      align-items: center;
      .up {
        width: 100%;
        height: px2rem(64);
        .exit {
          position: absolute;
          width: px2rem(30);
          height: px2rem(30);
          right: px2rem(12);
          top: px2rem(6);
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          white-space: nowrap;
          overflow: auto;
          width: px2rem(80);
          height: px2rem(28);
          line-height: px2rem(28);
          margin: px2rem(36) auto;
          font-size:px2rem(20);
          font-family:PingFang SC;
          font-weight:bold;
          color:rgba(18,112,227,1);
        }
      }
      .Explain {
        height: px2rem(146);
        width: 80%;
        font-size:px2rem(12);
        font-family:PingFang SC;
        font-weight:500;
        line-height:px2rem(17);
        color:rgba(38,38,38,1);
        div {
          width: 100%;
          margin-top: px2rem(10);
        }
      }
    }
    .empty {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: px2rem(202);
        height: px2rem(120);
      }
      span {
        margin-top: px2rem(20);
        font-size: px2rem(14);
        font-family: PingFang SC;
        color: #999999;
        font-weight: 500;
      }
    }
    .UnpassList-main {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: auto;
        .laItem {
            margin: px2rem(10) auto px2rem(10) !important;
        }
        .prove-main {
            width: 85%;
            height: px2rem(80);
            margin: px2rem(10) auto 0;
            background-color: #fff;
            border-radius: px2rem(6);
            position: relative;
            .left_purple_unpassed{
                background-color: $ui-color-assist-purple;
            }
            .left_yellow_unpassed{
                background-color: $ui-color-decorate-yellow;
            }
            .left_pink_unpassed{
                background-color: $card-color-pink;
            }
            .left{
                float: left;
                width: px2rem(6);
                height: px2rem(80);
                border-radius: px2rem(6) 0 0 px2rem(6);
            }
            .right{
            //width: call(100%- #{px2rem(325)});
            background-color: #FFF;
            position: absolute;
            top: 0;
            left: px2rem(6);
            right: 0;
            width: 100%;
            height: px2rem(80);
            border-radius: 0 px2rem(6) px2rem(6) 0;
            .text_warp{
                margin-left: px2rem(20);
                font-family: PingFang SC;
                width: 90%;
                float: left;
                overflow: hidden;
                .title {
                  width: 100%;
                  height: px2rem(44);
                  // display: flex;
                  // align-items: center;
                  .button {
                    cursor: pointer;
                    margin:px2rem(9) 0;
                    float: right;
                    width: px2rem(34);
                    height: px2rem(24);
                    font-size:px2rem(12);
                    text-align: center;
                    border: px2rem(1) solid rgba(38,38,38,1) ;
                    border-radius: px2rem(4);
                    font-family:PingFang SC;
                    font-weight:800;
                    line-height:px2rem(24);
                    color:rgba(38,38,38,1);
                  }
                  .appealed {
                    border: px2rem(1) solid rgba(188,191,196,1);
                    color: rgba(188,191,196,1);
                  }
                }
                .content{
                margin-right: px2rem(59);
                height: px2rem(44);
                line-height: px2rem(44);
                .text{
                    float: left;
                    /*border: px2rem(1) solid black;*/
                    max-width: 90%;
                    height: px2rem(44);
                    font-size: $text-size-imp;
                    font-weight: 800;
                    color: #333333;
                    //超出的部分用省略号代替
                    text-overflow: ellipsis;
                    //不换行
                    white-space: nowrap;
                    overflow: hidden;
                }
                .icon{
                    float: left;
                    width: px2rem(22);
                    height: px2rem(22);
                    margin-top: px2rem(10);
                }
                }
                .tip{
                float: none;
                /*max-width: 100%;*/
                height: px2rem(30);
                line-height: px2rem(15);
                font-size: $text-size-normal;
                max-width: 90%;
                color: #999999;
                //不换行
                white-space: nowrap;
                /*border: px2rem(1) solid red;*/
                // display: -webkit-box;
                // -webkit-box-orient: vertical;
                // -webkit-line-clamp: 2;
                overflow: hidden;
                //超出的部分用省略号代替
                text-overflow: ellipsis;
                }
            }
            }
        }

    }
    .appealBox {
      position: absolute;
      z-index: 200;
      width: px2rem(302);
      height: px2rem(323);
      display: flex;
      flex-direction: row-reverse;
      justify-content: center;
      background-color: #fff;
      border-radius: px2rem(31);
      .exit {
        position: absolute;
        right: px2rem(12);
        top: px2rem(12);
        img {
          width: px2rem(30);
          height: px2rem(30);
        }
      }
      .box-body {
        width: px2rem(262);
        height: 100%;
        font-family:PingFang SC;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        .box-main {
          width: 100%;
          height: px2rem(251);
          // background-color: green;
          .title {
            height: px2rem(72);
            text-align: center;
            line-height: px2rem(72);
            font-size:px2rem(22);
            font-weight:bold;
            color:rgba(18,112,227,1);
          }
          .item {
            height: px2rem(179);
            width: 100%;
            // background-color: red;
            display: flex;
            flex-direction: column;
            .information {
              height: px2rem(48);
              // background-color: blue;
              width: 100%;
              display: flex;
              flex-direction: column;
              margin-bottom: px2rem(12);
              .namebox {
                height: px2rem(22);
                width: 100%;
                font-size:px2rem(16);
                font-family:PingFang SC;
                line-height:px2rem(22);
                color:rgba(38,38,38,1);
                overflow: hidden;
                display: flex;
                .namebox-word {
                  width: px2rem(80);
                  white-space: nowrap;
                  font-weight: bold;
                  margin-right: px2rem(10);
                }
                .itemname {
                  font-weight: 400;
                  color: rgba(18,112,227,1);
                  overflow: auto;
                  white-space: nowrap;
                }
              }
              .tip {
                width:100%;
                height:px2rem(20);
                font-size:px2rem(14);
                font-family:PingFang SC;
                font-weight:400;
                line-height:px2rem(20);
                color:rgba(188,191,196,1);
                overflow: auto;
                white-space: nowrap;
              }
            }
            .remark {
              height: px2rem(131);
              width: 100%;
              // background-color: yellow;
              display: flex;
              flex-direction: column;
              .remark-word {
                height: px2rem(22);
                width: 100%;
                font-size:px2rem(16);
                font-family:PingFang SC;
                font-weight:bold;
                line-height:px2rem(22);
                color:rgba(38,38,38,1);
              }
              textarea {
                cursor: text;
                height: px2rem(72);
                width: 100%;
                font-size:px2rem(12);
                font-family:PingFang SC;
                font-weight:500;
                line-height:px2rem(17);
                color:rgba(38,38,38,1);
                border: none;
                background-color: rgba(242,244,243,1);
              }
            }
          }
        }
        .box-bottom {
          width: 100%;
          height: px2rem(44);
          margin: px2rem(14) 0;
          // background-color: rgb(151, 22, 22);
          display: flex;
          justify-content: space-between;
          .button-body {
            width: px2rem(80);
            height: px2rem(44);
            font-size:px2rem(18);
            font-family:PingFang SC;
            font-weight:400;
            line-height:px2rem(44);
            text-align: center;
            color:rgba(255,255,255,1);
            border-radius: px2rem(20);
          }
          .cancel {
            background-color: #F84545;
          }
          .sure {
            background: -webkit-linear-gradient(to right,$gradients-color-lightblue, $gradients-color-deepblue); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(to right,$gradients-color-lightblue, $gradients-color-deepblue); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(to right,$gradients-color-lightblue, $gradients-color-deepblue); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right,$gradients-color-lightblue, $gradients-color-deepblue); /* 标准的语法 */
          }
        }
      }
    }
</style>
